<template>
  <div class="box">
    <!-- 头部 -->
    <div class="headBox">
      <h5 class="chattext">评价成功</h5>
    </div>
    <div class="main">
      <div class="topbopx">
        <img
          src="../../assets/images/image/xxhdpi/evaluation_background.png"
          alt=""
          class="imgresu"
        />
        <p class="pingsuss">评价成功</p>
        <p class="pspan">如果您的问题得到解决?送个礼物鼓励一下吧一～</p>
      </div>
      <!-- 礼物 -->
      <div class="gridbox">
        <div class="gridaabox" v-for="(item, index) in state.gridResults" :key="index">
          <img :src="item.pic" alt="" class="imggridbox" />
          <div class="gund_box">
            <p>{{ item.name }}</p>
            <p style="color: red; font-weight: 600">{{ item.worth }}H币</p>
            <van-button type="primary" class="buttona" @click="gogrid(item.id)"
              >立即赠送</van-button
            >
          </div>
        </div>
      </div>
      <van-button type="primary" size="large" @click="fanhui">返回</van-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import router from '@/router'
import { usecurrentStore } from '../../stores/Consultation'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route, 'hahah')

const { recordId } = route.query
console.log(recordId, 'ahahahahahahah')

const state:any = usecurrentStore()

onMounted(async () => {
  await state.gridData()
})

const fanhui = () => {
  router.push('/history')
}
// 送礼物
const gogrid = async (giftId: number) => {
  const userId = state.userId
  const sessionId = state.sessionId
  await state.gogridData(userId, sessionId, Number(recordId), giftId)
}
</script>
<style scoped lang="scss">
.box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
// 头部
.headBox {
  width: 100%;
  height: 40px;
  background-color: white;
  border-bottom: 1px solid #ccc;
  .chattext {
    text-align: center;
    line-height: 40px;
    font-size: 15px;
  }
}
.topbopx {
  height: 6rem;
  border-bottom: 1px solid gray;
}

.imgresu {
  width: 100vw;
  height: 5rem;
  position: relative;
}
.pingsuss {
  color: #fff;
  font-size: 28px;
  position: absolute;
  top: 16%;
  left: 35%;
}
.pspan {
  text-align: center;
  color: gray;
  padding-top: 0.2rem;
}
.gridaabox {
  height: 3rem;
  //   background-color: red;
  border: 1px solid rgb(212, 209, 209);
  .imggridbox {
    width: 30%;
    float: left;
  }
  .gund_box {
    float: left;
    p {
      font-size: 14px;
      padding-top: 0.2rem;
      margin-left: 1rem;
    }
    .buttona {
      margin-left: 4rem;
    }
  }
}
</style>
